import Link from "next/link";
const publicDomain = process.env. NEXT_PUBLIC_DOMAIN;
 
const Footer = ({ data }) => {


  
  
  const whatsappNumber = data?.driver_whatsapp_number;
 
  const formattedNumber = whatsappNumber.replace(/[\s-+]/g, '');
  const whatsappLink = `https://wa.me/${formattedNumber}`;

  function formatDate(blogDate) {
   
    const date = new Date(blogDate);
    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    const day = date.getDate();
    const month = monthNames[date.getMonth()];
    const year = date.getFullYear();
    return `${day} ${month}, ${year}`;
}


const apiResponseDateOne = data?.latest_blogs[0].created_at;
const apiResponseDateTwo = data?.latest_blogs[1].created_at;
const DateBlogOne = formatDate(apiResponseDateOne);
const DateBlogTwo = formatDate(apiResponseDateTwo);

  return (
    <>
      <footer>
        <div className="container">
          <div className="row">
            <div className="col-lg-3 col-md-6 col-sm-12 col-12">
              <div className="footer-col-0">
                <a className="navbar-brand-1" href="#">
                  <img src={data?.website_footer_logo} alt="" height="50" /> {data?.website_name}
                </a>
                <br /><br />
                <p>
                  {data?.footer_description}
                </p>
                <br />
                <div className="footer-col-icon">
                  {(data?.facebook_url) ?
                    <Link href={data?.facebook_url}><i className="fab fa-facebook-f"></i ></Link>
                    : null
                  }
                  {(data?.driver_whatsapp_number) ?
                    <Link href={whatsappLink}><i className="fab fa-whatsapp"></i ></Link>
                    : null
                  }
                  {(data?.twitter_url) ?
                    <Link href={data?.twitter_url}><i className="fab fa-twitter"></i></Link >
                    : null
                  }
                  {(data?.instagram_url) ?
                    <Link href={data?.instagram_url}><i className="fab fa-instagram"></i></Link >
                    : null
                  }
                  {(data?.linkedin_url) ?
                    <Link href={data?.linkedin_url}><i className="fab fa-linkedin-in"></i></Link >
                    : null
                  }
                </div>
              </div>
            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-12">
              <div className="footer-col-1">
                <h4 className="footer-heading">QUICK LINK</h4>
                <ul className="menu-link">
                  <li className="menu-list"><a href="#about_me"><i className="fas fa-long-arrow-alt-right"></i>About Us</a></li>
                  <li className="menu-list"><a href="#our_services"><i className="fas fa-long-arrow-alt-right"></i>Taxi Services</a></li>
                  <li className="menu-list"><a href="#book_taxi"><i className="fas fa-long-arrow-alt-right"></i>Book A Taxi</a></li>
                </ul>
              </div>
            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-12">
              <div className="footer-col-2">
                <h4 className="footer-heading">RECENT POSTS</h4>
                <div className="row">
                  <div className="col-lg-6 col-md-6 col-sm-6 col-6">

                    <div className="img-post">
                      <a href={`${publicDomain}/blogs/${data.latest_blogs[0].id}`} target = '_blank'><img src={data.latest_blogs[0].banner_image} alt="post_1" /></a>
                    </div>
                  </div>
                  <div className="col-lg-6 col-md-6 col-sm-6 col-6">
                    <div className="post-date">
                     <i className="fas fa-calendar-alt"></i>
                      <span>{DateBlogOne}</span>
                    </div>
                    <div className="post-content">
                      <h5><a href={`${publicDomain}/blogs/2`} target = '_blank'>{data.latest_blogs[0].title}</a></h5>
                      <p>< a href={`${publicDomain}/blogs/2`} target = '_blank'>Read More <i className="fas fa-long-arrow-alt-right"></i></a></p>
                    </div>
                  </div>
                </div>
                <hr />
                <div className="row">
                  <div className="col-lg-6 col-md-6 col-sm-6 col-6">
                    <div className="img-post">
                      <a href={`${publicDomain}/blogs/${data.latest_blogs[1].id}`}  target = '_blank'><img src={data.latest_blogs[1].banner_image} alt="post_2" /></a>
                    </div>
                  </div>
                  <div className="col-lg-6 col-md-6 col-sm-6 col-6">
                    <div className="post-date">
                     <i className="fas fa-calendar-alt"></i>
                      <span>{DateBlogTwo}</span>
                    </div>
                    <div className="post-content">
                      <h5><a href={`${publicDomain}/blogs/2`} target = '_blank'>{data.latest_blogs[1].title}</a></h5>
                      <p>< a href={`${publicDomain}/blogs/2`}  target = '_blank'>Read More <i className="fas fa-long-arrow-alt-right"></i></a></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-12">
              <div className="footer-col-3">
                <h4 className="footer-heading">CONTACT DETAILS</h4>
                <div className="footer-contact">
                  <p style={{ color: "white" }}><b>PHONE NUMBER</b></p>
                  <div className="footer-col-3-icon">
                    <i className="fas fa-phone-alt"></i>
                    <p><a href="tel:(+91)9825476243"> (+91){data?.user.phone_number}</a></p>
                  </div>
                </div>
                <div className="footer-contact">
                  <p style={{ color: "white" }}><b>EMAIL ADDRESS</b></p>
                  <div className="footer-col-3-icon">
                    <i className="fas fa-envelope"></i>
                    <p><a href="email:[email protected]">{data?.user.email}</a></p>
                  </div>
                </div>
                <div className="footer-contact">
                  <p style={{ color: "white" }}><b>OFFICE LOCATION</b></p>
                  <div className="footer-col-3-icon">
                    <i className="fas fa-map-marker-alt"></i>
                    <p><a>{data?.user.transporters[0].address}</a></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>

      <section className="footer-bottom">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="footer-bottom-1">
                <div className="footer-bottom-text">
                  <p>Privacy Policy | All rights reserved</p>
                </div>
                <div className="footer-bottom-text-1">
                  <p>Powered By <a href="https://inclusionsoft.com/" target="_blank" rel="noopener noreferrer"><img src="img/inclusion-logo-black.png" alt="" width="100" /></a></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>


    </>
  );
}

export default Footer;